<template>
  <div class="recuitmentform">
        <van-nav-bar
            title="我的招聘"
            left-text=""
            fixed
            placeholder
            left-arrow
            @click-left="$router.back()"
        ></van-nav-bar>
        <div class="title">
            <div class="title-item">
                <div class="title-item-left">
                    <span>12</span>
                    <p>已发布职位数</p>
                </div>
                <div class="title-item-right">
                    <img src="../../assets/images/invite/one.png" alt="">
                </div>
            </div>
            <div class="title-item">
                <div class="title-item-left">
                    <span>122</span>
                    <p>已获得简历数</p>
                </div>
                <div class="title-item-right">
                    <img src="../../assets/images/invite/two.png" alt="">
                </div>
            </div>
        </div>
        <div class="content">
             <van-cell-group v-for="(item,index) in recruitmentArr" :key="index">
                 <div class="content-item" @click="$router.push({path:'/recruitmentdetail',query:{id:item.id}})">
                     <div class="content-item-left">
                         <img :src="item.cover" alt="">
                     </div>
                     <div class="content-item-right">
                         <h2>{{item.title}}</h2>
                         <span>{{item.describes}}</span>
                         <div class="content-item-right-bottom">
                             <span>已投递:110份</span>
                             <span>{{item.gmtCreate}}</span>
                         </div>
                     </div>
                 </div>
             </van-cell-group>
        </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
        recruitmentArr:[]
    };
  },

  async mounted() {
      this.getRecruits();
  },

  methods: {
    getRecruits(){
        this.$api.getRecruits({account:sessionStorage.getItem("agentId")}).then(res=>{
            this.recruitmentArr=res.data
        })
    },
    
  },
};
</script>

<style scoped lang="less">
.content{
    .van-cell-group{
        .content-item{
            display: flex;
            padding: 12px;
            .content-item-left{
                width: 30%;
                img{
                    width: 200px;
                    height: 100px;
                }
            }
            .content-item-right{
                width: 75%;
                padding-left: 10px;
                line-height: 22px;
                h2{
                    font-size: 18px;
                }
                span{
                    color: #999999;
                    font-size: 14px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .content-item-right-bottom{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 15px;
                }
            }
        }
    }
}
.title{
    display: flex;
    padding: 12px;
    justify-content: center;
    .title-item{
        width: 50%;
        height: 80px;
        opacity: 1;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0px 2px 6px 0px rgba(92,94,139,0.14); 
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 12px;
        .title-item-left{
            margin-right: 20px;
            span{
                display: block;
                font-size: 18px;
                text-align: center;
            }
            p{
                color: #999999;
                font-size: 12px;
            }
        }
        .title-item-right{
            img{
                width: 40px;
                height: 40px;
            }
        }
    }
}
</style>
